<template>
  <div class="pd30 flex flexjcsa produceFactory">
    <div class="panelWrap catalog">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>计划目录</div>
        <el-button type="primary" icon="el-icon-plus" class="addCatalog" circle @click="handleAddLog" />

      </div>
      <div class="catalog-list flex fs14 fwb">
        <div v-for="(item,index) in catalog" :key="item.id" :class="['list-item',logIndex == index ? 'activeLog' : '']" @click="handleLogCheck(item,index)">
          <i class="el-icon-folder" />
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="panelWrap main">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div v-if="currentLog!=null">
          <div v-show="!isLogEdit">
            <span class="log-name">{{ currentLog.name }}</span>
            <el-button size="small" type="warning" icon="el-icon-edit-outline" @click="handleEdit" />
            <el-button size="small" type="warning" icon="el-icon-delete" @click="handleRemove" />
          </div>
          <el-input v-show="isLogEdit" ref="editInput" v-model="currentLog.name" class="query-input" @blur="handleBlur" />
        </div>
        <div class="dialog">
          <el-dialog @closed="handleClose" custom-class='my-dialog' title="添加计划" :visible="dialogFormVisible">

            <el-form :show-message="false" :rules="rules" label-position="left" ref="addData" :model="tableData" label-width="100px">
              <div>
                <el-form-item label="名称" prop="name">
                  <el-input :disabled="isCover || isAdd" placeholder="填写计划名称" v-model="tableData.name"></el-input>
                </el-form-item>

                <el-form-item label="目录" prop="directoryId">
                  <el-select :disabled="isCover  || isAdd" clearable v-model="tableData.directoryId" placeholder="请选择目录">
                    <el-option v-for="(item,index) in catalog" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="分辨率" prop="resolution">
                  <el-select :disabled="isCover  || isAdd" clearable v-model="tableData.resolution" placeholder="请选择分辨率">
                    <el-option v-for="(item,index) in resolution" :key="index" :label="item" :value="index+1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="类型" prop="type">
                  <el-select :disabled="isCover || isAdd" clearable v-model="tableData.type" placeholder="请选择类型">
                    <el-option v-for="(item,index) in type" :key="index" :label="item" :value="index+1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="有效期">
                  <el-col :span="11">
                    <el-form-item prop="startDate">
                      <el-date-picker :disabled="isCover || isAdd" value-format="yyyy-MM-dd" type="date" placeholder="开始日期" v-model="tableData.startDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align: center;"> - </el-col>
                  <el-col :span="11">
                    <el-form-item prop="endDate">
                      <el-date-picker :disabled="isCover || isAdd" value-format="yyyy-MM-dd" type="date" placeholder="结束日期" v-model="tableData.endDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="执行方式" prop="executeMode">
                  <el-select :disabled="isCover || isAdd" clearable v-model="tableData.executeMode" placeholder="请选择执行方式">
                    <el-option v-for="(item,index) in executeMode" :key="index" :label="item" :value="index+1"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="colFlex">
                <div class="m-b-15">
                  <el-form-item label="选择广告">
                    <el-button :disabled="false" class="m-l-10" type="primary" icon="el-icon-plus" @click="addMateria" />
                    <el-button :disabled="false" type="primary" icon="el-icon-delete" @click="removeMateria" />
                  </el-form-item>

                  <el-table @select="handleCheck3" @select-all="handleCheck3" max-height="400" ref="multipleTable" :data="tableData.taskAdvertDtoList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column :selectable="selectable" type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="名称" width="160">
                      <template slot-scope="scope">
                        {{scope.row.advertName}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="duration" label="时长" width="140">
                      <template slot-scope="scope">
                        <el-time-picker value-format="HH:mm:ss" v-model="scope.row.duration" placeholder="任意时间点">
                        </el-time-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="每日次数" width="100" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.dayTimes" placeholder="">
                          <el-option label="70" :value="1"></el-option>
                          <el-option label="140" :value="2"></el-option>
                          <el-option label="210" :value="3"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="广告类型" width="140" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.advertType" placeholder="">
                          <el-option label="商业广告" :value="1"></el-option>
                          <el-option label="公司广告" :value="2"></el-option>
                          <el-option label="招商广告" :value="3"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="优先播放" width="90" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.priorityPlay" placeholder="">
                          <el-option label="否" :value="0"></el-option>
                          <el-option label="是" :value="1"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <div>
                  <el-form-item label="选择播放器">
                    <el-button :disabled="isCover || isAdd" class="m-l-10" type="primary" icon="el-icon-plus" @click="addScreen" />
                    <el-button :disabled="isCover || isAdd" type="primary" icon="el-icon-delete" @click="removeScreen" />
                  </el-form-item>

                  <el-table @select="handleCheck3" @select-all="handleCheck3" max-height="400" ref="multipleTable" :data="tableData.taskScreenDtoList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column align="center" label="名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.screenName || scope.row.name }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column align="center" label="小区名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.villageName }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column align="center" label="商圈名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.businessAreaName }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addAdvert(false)">取 消</el-button>
              <el-button v-if="!isEdit" type="primary" @click="addAdvert(true)">确 定</el-button>
              <el-button v-else type="isEdit" @click="handleEditLog">更 新</el-button>
            </div>
          </el-dialog>

          <el-button @click="dialogFormVisible = true" class="addBtn fw" type="primary">添加计划</el-button>
        </div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="flex">
            <el-select v-model="queryParam.status" clearable class="isWechat-select coInput m-r-15" placeholder="审核状态" @change="handleStatusChange">
              <el-option label="待审" :value="0" />
              <el-option label="已审" :value="1" />
              <el-option label="打回" :value="2" />
              <el-option label="删除" :value="3" />
            </el-select>
            <el-input clearable v-model="queryParam.name" class="query-input m-r-15" placeholder="名称" @blur="handleSearch" />
            <el-date-picker v-model="queryParam.startDate" class="query-input m-r-15" value-format="yyyy-MM-dd" :picker-options="pickerOption" clearable type="date" placeholder="开始日期" @change="handleEndDate" />
            <el-date-picker v-model="queryParam.endDate" class="query-input m-r-15" value-format="yyyy-MM-dd" :picker-options="pickerOption" clearable type="date" placeholder="结束日期" @change="handleEndDate" />
          </div>

        </div>
        <div class="flex flexac pl p-b-10 search-box">
          <!-- <el-button class="defaultbtn" type="primary" @click="handleApprove(1)"><i class="iconfont icon-wenjiandaochu" />已审核</el-button>
          <el-button class="defaultbtn" type="primary" @click="handleApprove(2)"><i class="iconfont icon-wenjiandaochu" />打回</el-button> -->
          <!-- <el-button class="defaultbtn" type="primary"><i class="iconfont icon-wenjiandaochu" />删除</el-button> -->

          <el-dropdown trigger="click" @command="handleMoveAdvert">
            <el-button size="small" type="primary">
              <i class="el-icon-rank" />
              移动到
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in catalog" :key="item.id" :command="item.id"><i class="el-icon-folder el-icon--left" />{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-table @row-click='handleRowClick' id="dataList" ref="dataList" class="con-table" type="expand" :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck" @select-all="handleCheck" @selection-change="handleCheckChange">
          <el-table-column width="50" type="selection" label="全选" />

          <el-table-column align="center" label="名称">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="分辨率">
            <template slot-scope="scope">
              <span>{{ resolution[scope.row.resolution - 1] }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="类型">
            <template slot-scope="scope">
              <span>{{ type[scope.row.type - 1] }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="审核状态">
            <template slot-scope="scope">
              <el-tag :type="tagType[scope.row.status]" effect="dark">
                {{ status[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label="上刊状态">
            <template slot-scope="scope">
              <el-tag :type="deployTagStatus[scope.row.deployStatus - 1]" effect="dark">
                {{ deployStatus[scope.row.deployStatus - 1] || '无'}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label="上刊方式">
            <template slot-scope="scope">
              <el-tag :type="deployTypeTag[scope.row.deployType - 1]" effect="dark">
                {{ deployType[scope.row.deployType - 1] || '无'}}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="name" align="center" label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button size="small" type="primary">
                  <i class="el-icon-s-tools" />
                  <i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="0"><i class="el-icon-edit el-icon--left" />修改</el-dropdown-item>
                  <el-dropdown-item :command="1"><i class="el-icon-delete el-icon--left" /> 删除</el-dropdown-item>
                  <el-dropdown-item :command="2"><i class="el-icon-view el-icon--left" /> 追加上刊</el-dropdown-item>
                  <el-dropdown-item :command="3"><i class="el-icon-view el-icon--left" /> 覆盖上刊</el-dropdown-item>
                  <el-dropdown-item :command="4"><i class="el-icon-view el-icon--left" /> 下刊</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button class="defaultbtn" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
                <i />查看</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <div class="panelWrap details">
      <el-table :data="currentMateria" stripe style="width: 100%">
        <el-table-column prop="key" label="属性" width="100">
        </el-table-column>
        <el-table-column prop="val" label="值" width="250">
          <template slot-scope="scope">
            <div v-if="scope.row.key === '广告'">
              <div v-for="item in scope.row.val" :key="item.id">{{item.advertName}}</div>
            </div>
            <div v-else>{{scope.row.val}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="选择广告" :visible="dialogMateria">
      <el-table :max-height="500" id="advertList" ref="advertList" class="con-table" type="expand" :data="advertList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck2" @select-all="handleCheck2">
        <el-table-column width="50" type="selection" label="全选" />

        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="目录">
          <template slot-scope="scope">
            <span>{{ scope.row.directoryName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="广告时长">
          <template slot-scope="scope">
            <span>{{ scope.row.duration }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <el-tag :type="tagType[scope.row.status]" effect="dark">
              {{ status[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="name" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handlePreview" class="defaultbtn previewBtn" type="primary">预览</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMateria = false">取 消</el-button>
        <el-button type="primary" @click="confirmMateria">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择播放器" :visible="dialogScreen">
      <el-table :max-height="500" id="advertList" ref="advertList" class="con-table" type="expand" :data="screenList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)" @select="handleCheck4" @select-all="handleCheck4">
        <el-table-column width="50" type="selection" label="全选" />

        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="设备名称">
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="目录">
          <template slot-scope="scope">
            <span>{{ scope.row.directoryName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="商圈名称">
          <template slot-scope="scope">
            <span>{{ scope.row.businessAreaName }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="name" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handlePreview" class="defaultbtn previewBtn" type="primary">预览</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogScreen = false">取 消</el-button>
        <el-button type="primary" @click="confirmScreen">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="素材预览" :visible.sync="dialogPreview">
      <div class="flex flextc">
        <el-image class="previewImg" v-if="currentItem.fileType === 1" fit="contain" :src="path"></el-image>
        <video class="previewVideo" v-if="currentItem.fileType === 2" controls :src="path"></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchScreenList } from '@/api/operation/media/screen'
import { fetchCatalogList, catalogAdd, catalogUpdate, catalogDelete } from '@/api/operation/media/catalog'
import { fetchPlanList, planDetail, planAdd, planDelete, planUpdate, planAddDeploy, planCoverDeploy, planUndeploy } from '@/api/operation/media/playPlan'
import { fetchAdvertList, advertDetail, advertAdd } from '@/api/operation/media/advertProduction'
import { formatDateTimeimport } from '@/utils/toolclass'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'playPlanEnter',
  data() {
    return {
      addDeployList:[],
      rules: {
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        startDate: [{ required: true, message: '请输入开始日期', trigger: 'change' }],
        endDate: [{ required: true, message: '请输入结束日期', trigger: 'change' }],
        resolution: [{ required: true, message: '请选择分辨率', trigger: 'change' }],
        directoryId: [{ required: true, message: '请选择目录', trigger: 'change' }],
        executeMode: [{ required: true, message: '请选择执行方式', trigger: 'change' }]
      },
      screenList: [],
      isLogEdit: false,
      tableName: 'name',
      deleteList: [],
      selectMateriaList: [],//选择素材列表
      selectScreenList: [],//选择播放器列表
      multipleSelection: [],
      moduleMateria: [],// 模块素材列表
      addData: { //添加广告数据
        directoryId: '',
        startDate: '',
        endDate: '',
        executeMode: '',
        name: '',
        resolution: '',
        type: '',
        taskAdvertDtoList: [],
        taskScreenDtoList: []
      },
      edit: {
        fileName: '',
        catalog: ''
      },
      approve: {
        advise: '',
        currentLevel: '',
        fromId: '',
        fromType: 3,
        status: ''
      },
      rowData: {},
      moveEnable: false,
      moveLogId: '',
      file: {},
      dialogScreen: false,
      dialogMateria: false,
      dialogApprove: false,
      dialogEdit: false,
      dialogPreview: false,
      dialogFormVisible: false,
      fileList: [],
      timer: null,
      isEdit: false,
      isAdd:false,
      isCover: false,
      logNmae: '',
      logIndex: 0,
      currentItem: {},
      currentMateria: [],//当前素材
      currentLog: null,//当前目录
      catalog: [],//素材目录
      deployType: ['追加上刊', '覆盖上刊'],
      deployTypeTag: ['success', 'warning'],
      deployStatus: ['已上刊', '下刊', '已过期'],
      deployTagStatus: ['success', 'info', 'danger'],
      type: ['周期', '垫片', '插播'],
      executeMode: ['全天时段', '黄金时段', '普通时段'],
      resolution: ['1920*1080', '1080*1920', '1366*768', '768*1366', '1440*900', '900*1440'],
      tagType: ['warning', 'success', 'info', 'danger'],
      status: ['待审', '已审', '打回', '删除'],
      fileType: ['图片', '视频', '文本'],
      outType: 1,
      userInfo: {},
      outState: '',
      pickerOption: {
        // 设置日期禁用状态
        disabledDate(date) {
          return date.getTime() > Date.now()
        }
      },
      delPro: '',
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      path: '',
      advertList: [],
      dataList: [],
      queryParam: {
        name: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      visible: false,
      editSystem: {},
      refresh: false,
      url: require('@/assets/error.png'),
      seniorSet: {
        'field': false,
        'sortable': false
      }
    }
  },
  computed: {
    tableData() {
      return this.isEdit ? this.currentItem : this.addData
    }
  },
  watch: {},
  created() {
    this.getCatalogList()
  },
  mounted() {
    this.userInfo = JSON.parse(this.$storage.get('userInfo'))
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/operation/media/playPlan/playPlanEnter/index' }))
  },
  methods: {
    selectable(row,index){
      if(this.isAdd && row.id){
        return false
      }else{
        return true
      }
    },
    handleClose() {
      this.$refs.addData.resetFields();
      this.selectMateriaList = []
      this.resetData()
    },
    // 获取播放器列表
    getScreenList() {
      const params = {
        status: 1,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchScreenList(params).then(res => {
        if (res.code === '000000') {
          this.screenList = res.data
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    //确认添加播放器
    confirmScreen() {
      if (this.selectScreenList.length) {
        let arr = []
        this.selectScreenList.forEach((item, index) => {
          arr[index] = {
            businessAreaId: item.businessAreaId,
            screenId: item.id,
            villageId: item.villageId,
            villageName: item.villageName,
            name: item.name,
            businessAreaName: item.businessAreaName
          }
        })
        this.tableData.taskScreenDtoList.push(...arr)
      }
      this.dialogScreen = false

    },
    //确认添加广告
    confirmMateria() {
      if (this.selectMateriaList.length) {
        this.selectMateriaList = this.selectMateriaList.map((item, index) => {
          return {
            advertId: item.id,
            advertType: 1,
            dayTimes: 1,
            duration: item.duration,
            priorityPlay: 0,
            advertName: item.name,
          }
        })
        this.tableData.taskAdvertDtoList.push(...this.selectMateriaList)
      }
      this.dialogMateria = false

    },
    // 获取素材列表
    getAdvertList() {
      const params = {
        status: 1,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchAdvertList(params).then((res) => {
        if (res.code === '000000') {
          this.advertList = res.data
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加播放器
    addScreen() {
      this.dialogScreen = true;
      this.getScreenList();
    },
    // 删除播放器
    removeScreen() {
      let arr = this.addData.taskScreenDtoList;
      this.deleteList.forEach((item) => {
        arr.forEach((item2, index) => {
          if (item === item2) {
            this.addData.taskScreenDtoList.splice(index, 1)
          }
        })
      })
      this.deleteList = [];
    },
    // 添加广告计划
    addMateria() {
      this.getAdvertList();
      this.dialogMateria = true;
    },
    // 删除广告计划
    removeMateria() {
      let arr = this.tableData.taskAdvertDtoList;
      this.deleteList.forEach((item) => {
        arr.forEach((item2, index) => {
          if (item === item2) {
            this.tableData.taskAdvertDtoList.splice(index, 1)
          }
        })
      })
      this.deleteList = [];
    },
    resetData() {
      this.addData = {
        directoryId: '',
        startDate: '',
        endDate: '',
        executeMode: '',
        name: '',
        resolution: '',
        type: '',
        taskAdvertDtoList: [],
        taskScreenDtoList: []
      }
    },
    // 自定义错误弹窗
    customValid(field) {
      let arr = [];
      for (let item in field) {
        arr.push(item)
      }
      showNotice('error', '提示', field[arr[0]][0].message)
    },
    // 添加播放计划
    addAdvert(flag) {

      if (flag) {
        this.$refs.addData.validate((valid, field) => {
          if (valid) {
            planAdd(this.addData).then(res => {
              if (res.code === '000000') {
                this.getList();
                showNotice('success', '提示', '添加成功')
                this.resetData();
                this.dialogFormVisible = false
              } else {
                showNotice('warning', '提示', res.msg)
              }
            })
          } else {
            this.customValid(field)
          }
        })
      } else {
        this.resetData();
        this.dialogFormVisible = false
        this.isEdit = false
        this.isCover = false
        this.isAdd = false
      }


    },
    handleApprove(flag) {
      if (this.moveEnable && this.dataList.length > 0) {
        this.dialogApprove = true
        this.approve.status = flag
      } else {
        showNotice('warning', '提示', '请选择一个素材')
      }
    },
    //删除计划
    planDelete() {
      this.$confirm('此操作将永久删除该广告,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'addDialog'
      }).then(({ value }) => {
        planDelete(this.currentItem.id).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '删除成功')
            this.getList();
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 编辑修改
    handleEditLog() {
      this.$refs.addData.validate((valid, field) => {
        if (valid) {
          if (this.isCover) {
            this.coverDeploy();
          }else if(this.isAdd){
            this.addDeploy();
          }else {
            planUpdate(this.tableData).then(res => {
              if (res.code === '000000') {
                showNotice('success', '提示', '修改成功')
                this.dialogFormVisible = false;
                this.isEdit = false;
                this.getList();
              } else {
                showNotice('warning', '提示', res.msg)
              }
            })
          }
        } else {
          this.customValid(field)
        }
      })
    },
    //移动广告
    async handleMoveAdvert(val) {
      if (this.moveEnable && val != '' && this.dataList.length > 0) {
        let params = await this.getDetail(this.rowData.id)
        params.directoryId = val;
        planUpdate(params).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '移动成功')
            this.moveLogId = '';
            this.getList();
          } else {
            showNotice('warning', '提示', res.msg)
          }
        })
      } else {
        showNotice('warning', '提示', '请选择一个素材')
      }

    },
    //素材预览
    handlePreview() {
      this.dialogPreview = true;
    },
    //素材上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    //点击一行
    handleRowClick(row, column, event) {
      this.getDetail(row.id)
    },
    handleRowClick2(row, column, event) {
      // this.currentItem = row;
    },
    //日期筛选
    handleEndDate() {
      this.getList()
    },
    // 审核状态筛选
    handleStatusChange() {
      this.getList()
    },
    // 编辑目录
    handleEdit() {
      this.$nextTick(() => {
        const timer = setTimeout(() => {
          this.$refs.editInput.focus()
        }, 100)
        this.$once('hook:beforeDestroy', function () {
          clearTimeout(timer)
        })
      })
      this.isLogEdit = true
    },
    // 修改目录
    handleBlur() {
      const params = {
        id: this.currentLog.id,
        name: this.currentLog.name,
        parentId: this.currentLog.parentId,
        type: this.currentLog.type,
        version: this.currentLog.version
      }
      catalogUpdate(params).then(res => {
        if (res.code === '000000') {
          this.getCatalogList()
          this.logIndex = 0
          showNotice('success', '提示', '修改成功!')
        }
      })
      this.isLogEdit = false
    },
    // 删除目录
    handleRemove() {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        catalogDelete(this.currentLog.id).then(res => {
          if (res.code === '000000') {
            this.getCatalogList()
            showNotice('success', '提示', '删除成功!')
          } else {
            showNotice('success', '提示', res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 添加目录
    handleAddLog() {
      this.$prompt('新建目录', '目录名', {
        confirmButtonText: '创建',
        cancelButtonText: '取消',
        customClass: 'addDialog'
      }).then(({ value }) => {
        const params = {
          type: 3,
          name: value
        }
        catalogAdd(params).then(res => {
          if (res.code === '000000') {
            this.getCatalogList()
            this.$message({
              type: 'success',
              message: '创建成功'
            })
          }
        })
      }).catch(() => {
      })
    },
    // 追加上刊
    addDeploy() {
      this.addDeployList = this.tableData.taskAdvertDtoList.filter(item=>{
        return !item.id
      })
      const params = {
        deployType: 1,
        id: this.currentItem.id,
        reqTaskAdvertDtoList: this.addDeployList
      }
      planAddDeploy(params).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '追加成功')
          this.dialogFormVisible = false;
          this.isAdd = false;
          this.getList();
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    // 覆盖上刊
    coverDeploy() {
      const params = {
        deployType: 2,
        id: this.currentItem.id,
        reqTaskAdvertDtoList: this.currentItem.taskAdvertDtoList
      }
      planCoverDeploy(params).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '覆盖成功')
          this.dialogFormVisible = false;
          this.isCover = false;
          this.getList();
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    // 下刊
    unDeploy() {
      planUndeploy(this.currentItem.id).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '下刊成功')
          this.getList();
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    // 目录点击
    handleLogCheck(item, index) {
      this.currentLog = item
      this.logIndex = index
      this.getList()
    },
    // 操作下拉菜单
    handleCommand(i) {
      switch (i) {
        case 0:
          this.dialogFormVisible = true;
          this.isEdit = true;
          break;
        case 1:
          this.planDelete();
          break;
        case 2:
          this.isEdit = true;
          this.isAdd = true;
          this.dialogFormVisible = true;
          break;
        case 3:
          this.isEdit = true;
          this.tableData.taskAdvertDtoList = [];
          console.log(this.tableData.taskAdvertDtoList)
          this.isCover = true;
          this.dialogFormVisible = true;
          break;
        case 4:
          this.unDeploy()
          break;
        default:
          break;
      }
    },
    handleCheck(selection, row) {

      this.$refs.dataList.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.moveEnable = selection.length > 0
        this.$refs.dataList.toggleRowSelection(row, true)
        this.rowData = row
      }
    },
    handleCheck3(selection, row) {
      this.deleteList = selection;
    },
    handleCheck2(selection, row) {
      this.selectMateriaList = selection
    },
    handleCheck4(selection, row) {
      this.selectScreenList = selection
    },
    handleCheckChange(row) {
      if (row.length === 0) {
        this.moveEnable = false
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 名称搜索
    handleSearch() {
      this.getList()
    },
    // 获取目录列表
    getCatalogList() {
      const params = {
        pageIndex: 1,
        pageSize: 20,
        type: 3
      }
      fetchCatalogList(params).then(res => {
        if (res.code === '000000') {
          this.catalog = res.data
          this.currentLog = res.data[0]
          this.getList()
        }
      })
    },
    // 获取计划列表
    getList() {
      const params = {
        name: this.queryParam.name,
        startDate: this.queryParam.startDate,
        endDate: this.queryParam.endDate,
        status: this.queryParam.status,
        directoryId: this.currentLog?.id,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchPlanList(params).then((res) => {
        if (res.code === '000000') {
          this.dataList = res.data
          if (res.data.length) {
            let index1 = res.data[0]
            this.currentItem = res.data[0]
            this.getDetail(index1.id)
          }
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        }
      })
    },
    //获取广告详情
    getDetail(id) {
      let data = planDetail(id).then(res => {
        if (res.code === '000000') {
          this.currentItem = res.data;
          this.formatData(res.data)
          return res.data
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
      return data
    },
    //格式化数据
    formatData(data) {
      if (data) {
        this.currentMateria = [
          { key: '名称', val: data.name },
          { key: '目录', val: data.directoryName },
          { key: '分辨率', val: this.resolution[data.resolution] },
          { key: '有效期', val: `${data.startDate} --- ${data.endDate}` },
          { key: '执行方式', val: this.executeMode[data.executeMode - 1] },
          { key: '广告', val: data.taskAdvertDtoList },
          { key: '上刊时间', val: data.lstEdtDate },
          { key: '上刊人', val: data.lstEdtOprName },
          { key: '审核状态', val: this.status[data.status] },
          { key: '审核意见', val: data.approveLogDtoList.length ? data.approveLogDtoList[0].advise : '' },
          { key: '审核人', val: data.approveLogDtoList.length ? data.approveLogDtoList[0].approveUserName : '' },
        ]
      }

    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getList()
    },
    handleSizeChange2(val) {
      this.paging.pageSize = val
      this.getAdvertList()
    },
    // 监听分页
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getList()
    },
    handleCurrentChange2(val) {
      this.paging.currentPage = val
      this.getAdvertList()
    }
  }
}
</script>
<style >
.addDialog .el-input {
  width: 100% !important;
}
</style>
<style lang="scss" scoped>
@import "@/styles/public.scss";
::v-deep .el-tree-node .el-checkbox .el-checkbox__inner {
  display: block !important;
}
.colFlex {
  display: flex;
  flex-direction: column;
}
.tree-grow {
  width: 100%;
}
::v-deep .my-dialog {
  width: 80% !important;
}
.dialog ::v-deep .el-form {
  display: flex;
  justify-content: space-around;
}
.previewImg {
  width: 800px;
  height: 500px;
}
.previewVideo {
  width: 800px;
  height: 500px;
}
.previewBtn {
  margin: 10px;
}
::v-deep .el-dialog {
  height: auto;
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 50%;
}
::v-deep .el-dialog__title {
  color: #303133;
}
::v-deep .el-dialog__header {
  height: auto;
  padding: 20px 20px 10px;
  background-color: #fff;
}
::v-deep .el-dialog__body {
  height: auto;
  padding: 30px 20px;
}
.panelWrap {
  height: 100%;
}
.log-name {
  margin-right: 10px;
}
.activeLog {
  background: #eee;
}
.el-message-box__wrapper ::v-deep .el-input {
  width: 100% !important;
}
.main {
  width: 1000px;
}
.catalog {
  min-width: 180px;
}
.catalog-list {
  flex-flow: column;
  padding-top: 10px;
  .list-item {
    padding: 5px 10px;
    margin-bottom: 5px;
    cursor: pointer;
  }
  .list-item:hover {
    background: #eee;
  }
  .list-item:checked {
    background: #eee;
  }
}
.details {
  min-width: 250px;
}
.addCatalog {
  padding: 5px;
  color: var(--panelWrapTitle);
  background: #fff;
  border-color: #fff;
}
.el-icon-remove-outline::before {
  margin-right: 4px;
}
.pt {
  padding-top: 20px;
  > .el-select {
    width: 185px;
  }
}
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>

